import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Container } from '@/components/common/container';
import { Toolbar, ToolbarActions, ToolbarHeading } from '@/layouts/demo1/components/toolbar';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
import ProductList from '@/components/product/product-list';

const ProductListPage = () => {
  const navigate = useNavigate();

  const handleAddProduct = () => {
    navigate('/product-management/product-form');
  };

  const handleEditProduct = (product) => {
    navigate(`/product-management/product-form/${product.id}`);
  };

  const handleViewProduct = (product) => {
    navigate(`/product-management/product-detail/${product.id}`);
  };

  return (
    <>
      <Container>
        <Toolbar>
          <ToolbarHeading
            title="商品管理"
            description="管理商品信息、分类和库存"
          />
          <ToolbarActions>
            <Button onClick={handleAddProduct}>
              <Plus className="size-4 me-2" />
              添加商品
            </Button>
          </ToolbarActions>
        </Toolbar>
      </Container>

      <Container>
        <ProductList 
          onEdit={handleEditProduct}
          onView={handleViewProduct}
        />
      </Container>
    </>
  );
};

export default ProductListPage; 